<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>

<div id="app">
   {{title}} ,{{sex}} ,{{age}} , {{flag}} {{myhello()}}
    <br>
    <!--事件绑定-->
    <button type="button" v-on:click="myAdd(1)">累加</button>
    <br>
     显示累加和:{{sun}}
    <p @mousemove="xy">
        x轴：{{x}}
        y轴：{{y}}
    </p>
    <input type="text" v-model="title"/>
    显示绑定的数据:{{title}}
    <!--绑定html的标签属性-->
    <a :href="jd">跳转京东</a>
    <a v-bind:href="jd">跳转到京东</a>

    <p v-if="flag">
        这个标签值为true
    </p>
    <p v-else-if="flag">
        这个p标签经过判断为
    </p>

    <p v-else="flag">
        这个标签经过判断rich 属性值为false
    </p>
    <p v-show="rich">
        使用show判断显示语法，flag的值为true
    </p>
<!--遍历第一种-->
    <ul>
        <!--遍历属性名为args的数组-->
        <li v-for="a in args">{{a}}</li>
    </ul>
    <!--遍历第二次-->
    <ul>
        <!--遍历属性名为args的集合，遍历一次拿出一个元素，放入a变量中
          i就是数组的索引号，:key就是取索引号，赋值给i这个变量-->
        <li v-for="(a,i) in args" :key="i">{{i}}======{{a}}</li>
    </ul>
    <!--遍历第三种-->
    <!--遍历stu对象，每次获取一个属性
     属性值赋值为v
     属性名赋值为k
     索引号赋值给i-->
    <ul>
        <li v-for="(v,k,i) in stu">{{v}}======={{k}}========{{i}}</li>
    </ul>
</div>

<script type="text/javascript">
    //创建一个vue对象
    new Vue({

        el:"#app", //绑定id为app的页面元素
        data:{  //定义vue中对象属性
             title:"张三",
              sex:"男",
              age:18,
              flag:true,
              rich:false,
              args:[1,2,3,4,5,6,8],
              jd:"https://www.jd.com",
             sun:0,
            x:0,
            y:0,
            stu:{
                  username:"小王",
                  sex:"男",
                  age:200
             }
        },
        //定义方法
         methods:{
             myhello:function () {
                 return "hello world";

             },
             myAdd:function (s) {
               this.sun=this.sun+s
             },
             xy:function (event) {
                 this.x=event.clientX;
                 this.y=event.clientY;


             }
         }
    });


</script>

</body>
</html>